<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>糖尿病患者缓解调查问卷</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<style>
			#app {
				height: 100%;
			}
			.container {
				height: 100%;
			}
			.top {
				height: 2.6rem;
				padding: 0.42rem 0.38rem;
				display: flex;
				align-items: center;
			}
			.top img {
				width: 2.5rem;
				height: 2.5rem;
				margin-right: 0.24rem;
				display: inline-block;
			}
			.top span {
				display: inline-block;
				width: 4.01rem;
			}
			.divider {
				height: 0.14rem;
				background-color: #f5f5f5;
			}
			.title {
				padding: 0.25rem 0.28rem;
			}
			.photoList {
				padding: 0 0.27rem;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.photo {
				border-radius: 0.11rem;
				margin-bottom: 0.2rem;
				width: 3.38rem;
				height: 3.53rem;
			}
			.delete {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 3 !important;
				border-radius: 0rem !important;
				width: 0.45rem !important;
				height: 0.45rem !important;
			}
      .empty{
        width: 100%;
      }
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div class="top">
					<van-uploader :after-read="onRead" multiple :max-count="9" :before-read="beforeRead">
						<img src="../img/photo.png" />
					</van-uploader>
					<span>
						请您拍照上传所有相关病历及报告单 <br />请保证照片清晰以便系统识别存档<br /> 上传资料仅供医疗团队分析病情
						<br />将严格保密不会外传
					</span>
				</div>
				<div class="divider"></div>
				<div class="content">
					<div class="title">
						<span style="font-size: 0.28rem; color: rgba(0, 0, 0, 0.85)"
							>上传记录</span
						>
					</div>
					<div class="photoList" v-if="list&&list.length>0">
						<div style="position: relative;" v-for="(item,index) in list" :key="item">
              <img class="delete" src="../img/delete.png" @click="handleDelete(item)"></img>
							<img
								class="photo"
								:src="item.reportUrl"
								@click="preview(index)"
							></img>
							<van-image-preview
								v-model:show="show"
								:startPosition="startPosition"
								:images="list.map(v=>{
                return v.reportUrl
              })"
							>
								<!-- <template v-slot:index>第{{ index }}页</template> -->
							</van-image-preview>
						</div>
					</div>
          <div v-else>
            <img class="empty" src="../../doctor/img/empty.png">
            <p style="text-align: center;font-size: 0.25rem;color: #595959;">暂无上传记录～</p>
          </div>
				</div>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> -->

	<script type="module">
		// var vConsole = new VConsole()
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		const baseInfo = {
			data() {
				return {
					list: [],
					pid: '',
					startPosition: 0,
					show: false,
					url: {
						upLoad: '/sys/common/upload',
					},
				}
			},
			created() {
				this.pid = url('?pid')
				this.getList()
			},
			methods: {
				onRead(file) {
					if(Array.isArray(file)){
            const promise = []
            const toast = vant.Toast.loading({
              message: '上传中...',
              forbidClick: true,
              duration: 0,
            })
            file.forEach(v=>{
              let formData = new FormData()
              formData.append('file', v.file)
              promise.push(new Promise((resolve)=>{
                postAction(spliceUrl(this.url.upLoad), formData).then(res => {
                  if (res.data.success) {
                    resolve(res.data.message)
                  }
                })
              }))
            })
            Promise.all(promise).then(res=>{
              postAction(spliceUrl('/dossier/report/save'), {
                patientId: this.pid||localStorage.pid,
                reportUrls:res,
                type: 0,
              }).then(r => {
                r = r.data
                if (r.success) {
                  toast.clear()
                  this.$toast.success('上传成功')
                  this.getList()
                }
              })
            })
          } else{
            let formData = new FormData()
            const toast = vant.Toast.loading({
              message: '上传中...',
              forbidClick: true,
              duration: 0,
            })
            formData.append('file', file.file)
            postAction(spliceUrl(this.url.upLoad), formData).then(res => {
              if (res.data.success) {
                postAction(spliceUrl('/dossier/report/save'), {
                  patientId: this.pid||localStorage.pid,
                  reportUrls:[res.data.message],
                  type: 0,
                }).then(r => {
                  r = r.data
                  if (r.success) {
                    toast.clear()
                    this.$toast.success('上传成功')
                    this.getList()
                  }
                })
              }
            })
          }
				},
				preview(index) {
					this.startPosition = index
					console.log(this.startPosition)
					this.show = true
				},
        beforeRead(file){
          if(Array.isArray(file)){
            if(file.length>9){
              this.$toast.fail('单次最多上传9张报告，请分批上传！')
              return false
            } else {
              return true
            }
          } else{
            return true
          }
        },
				handleDelete(item) {
					postAction(spliceUrl('/dossier/report/del'), {
						dataIdList: [item.dataId],
					}).then(res => {
						res = res.data
						if (res.success) {
							this.$toast.success('删除成功')
							this.getList()
						} else {
							this.$toast.fail(res.message)
						}
					})
				},
				getList() {
					postAction(spliceUrl('/dossier/report/query'), {
						patientId: this.pid||localStorage.pid,
						type: 0,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.list = res.result
						}
					})
				},
				onClickLeft() {
					window.location.href = '../index.html'
				},
				onClickRight() {
					window.location.href = '../index.html'
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
